{% extends "../layout.html" %}

{% block subtitle %}
  {% if page > 1 %}第 {{ page }} 页 - {% end %}
  时间线
{% end %}
{% block style %}
  {% include "../includes/tweet_editor.html" %}
{% end %}
{% block script %}
<script id="tweet-template" type="text/template">
  <li id="show-<%= id %>" data-id="<%= id %>" class="item clearfix">
    <a class="avatar fl" href="<%= author_url %>">
      <img class="avatar" src="<%= author_avatar %>">
    </a>
    <div class="item-content">
      <div class="author-info">
        <a class="name" data-name="<%= author_name %>" href="<%= author_url %>"><%= author_nickname %></a>
        <a class="time" href="<%= tweet_url %>"><%= created %></a>
      </div>
    <div class="content tweet-content">
      <%== content %>
    </div>
    <% if (images.length > 0) { %>
    <div class="tweet-img-area close">
      <% if (images.length > 1) { %>
      <div class="thumbs pr">
        <ul class="clr">
          <% for (var i = 0, l = images.length; i < l; i++) { %>
          <% var img = images[i] %>
          <li>
            <img data-id="<%= img.id %>" src="<%= img.path %>">
          </li>
          <% } %>
        </ul>
      </div>
      <% } %>
      <span class="dib pr tweet-img-content">
        <% for (var i = 0, l = images.length; i < l; i++) { %>
        <% var img = images[i] %>
        <span class="img-cover img-cover-<%= i+1 %><% if (i > 2) { %> dn<% } %>">
            <img data-width="<%= img.width %>" data-height="<%= img.height %>" data-id="<%= img.id %>" src="<%= img.path %>">
            <% if (i === 0 && images.length > 1) { %>
            <div class="label"><%= images.length %>张图片</div>
            <% } %>
          </span>
        <% } %>
      </span>
    </div>
    <% } %>
    <div class="meta">
      <ul class="vote clearfix hidden">
        <li class="up">
          <a title="赞同" href="<%= tweet_url %>?action=up">
            <i class="icon-thumbs-up"></i>
             赞同(0)
          </a>
        </li>
        <li class="down">
          <a title="反对" href="<%= tweet_url %>?action=down">
            <i class="icon-thumbs-down"></i>
             反对(0)
          </a>
        </li>
        <li class="collect">
          <a title="收藏" href="<%= tweet_url %>?action=collect">
            <i class="icon-bookmark"></i>
             收藏
          </a>
        </li>
        <li class="edit">
          <a title="修改" href="<%= tweet_url %>/edit">
            <i class="icon-pencil"></i>
             修改
          </a>
        </li>
      </ul>
      <ul class="action clearfix">
        <li class="retweet">
          <a title="转推" href="#;">
            <i class="icon-reply"></i>
          </a>
        </li>
      </ul>
    </div>
  </li>
</script>
<script type="text/javascript" src="{{ static_url('js/timeline.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/tweet.js') }}"></script>
{% end %}
{% block body %}
{% if current_user %}
  <div class="tweet-box">
    <div class="tweet-area">
      <div class="tweet-editor" contenteditable="true">
        <div class="tweet-placeholder">
          输入内容吧...
        </div>
      </div>
    </div>
    <div class="tweet-preview dn">
    </div>
    <div class="toolbar clr">
      <a title="添加图片" class="add-img" href="javascript:;"><i class="icon-picture"></i></a>
      <button class="nbtn nbtn-p fr tweet-submit" type="button" disabled="disabled">
        发推
        <i class="icon-br"></i>
      </button>
    </div>
  </div>
{% end %}
<ul class="tweet-cate-nav">
  <li{% if cate == 'public' %} class="on"{% end %}>
    <a href="/timeline/public">公共</a>
  </li>
  {% if current_user %}
  <li{% if cate == 'private' %} class="on"{% end %}>
    <a href="/timeline">关注</a>
  </li>
  <li{% if cate == 'me' %} class="on"{% end %}>
    <a href="/timeline/me">俺</a>
  </li>
  {% end %}
</ul>
<div class="organ tweet-list">
  {% module Template("modules/tweet_list.html", tweets=tweets) %}
</div>
{% end %}
